import Button from "@mui/joy/Button"
import {styled} from "@mui/joy"
import {useTheme} from "../theme/index.js"
import {purple} from "../theme/color.js"

const H1 = styled('h1')(props => {
  return {color: props.theme.vars.palette.text.primary}
})
const Home = () => {
  const {changeTheme, toggleMode, mode} = useTheme()
  return <>
    <header>
    </header>
    <H1 className={'underline'}>Home</H1>
    <Button onClick={() => toggleMode()}>toggle mode , now is {mode} </Button>
    <Button onClick={() => changeTheme(purple)}>Purple </Button>
  </>
}

Home.propTypes = {}

export default Home
